import os
import numpy as np
import pandas as pd
import plotly.graph_objects as go 
import plotly.io as pio
#
# read the mapbox access token to enable 'satellite' and 'satellite-streets' styles:
#
with open('../../assets/mapbox-access-token.txt') as f:
    token = f.read()

pio.renderers.default = 'notebook'

# type your solution here

import json

with open('./OGA_Quadrants_WGS84.geojson','r') as f:
    quads = json.load(f)

from flatten_geojson import flatten_geojson
df_quads = flatten_geojson(quads)


df_quads.head()
# type your solution here
with open('./OGA_Licences_WGS84.geojson','r') as f:
    licences = json.load(f)

# type your solution here
df_licences = flatten_geojson(licences)


# type your solution here
with open('./OGA_Offshore_FieldDets_WGS84.geojson','r') as f:
    dets = json.load(f)

# type your solution here
df_dets = flatten_geojson(dets)


#
# 1. create an empty figure:
#
fig = go.Figure()

#
# 2. add quadrants as filled polygons (for which a choropleth is just a fancy name):
#
# complete your solution by setting geojson and locations arguments
fig.add_choroplethmapbox(
    geojson=quads,
    locations=df_quads.OBJECTID,
    z=np.zeros_like(df_quads.QUAD_NO),
    name='Quadrants',
    colorscale=[[0, 'LightSkyBlue'], [1, 'LightSkyBlue']],
    visible=True,
    marker_opacity=0.2,
    marker_line_width=1,
    marker_line_color='White',
    showlegend=True,
    showscale=False,
    hovertext=df_quads.QUAD_NO,
    hovertemplate='Quad %{hovertext}<extra></extra>'
)

#
# 3. set background style, default zoom level, default center, and remove plot margins to make better use of the screen space:
#
# complete your solution by setting a mapbox_style
fig.update_layout(
    mapbox_style='satellite-streets',
    mapbox_accesstoken=token,
    mapbox_zoom=4,
    mapbox_center={"lat": 56.00, "lon": -2.00},
    margin={"r":0,"t":0,"l":0,"b":0}
)

#
# 4. style the legend:
#
# complete your solution by setting legend_title_text
fig.update_layout(
    showlegend=True,
    legend_title_text='UK Continental Shelf E&P Basemap<br><br>Created by David Psaila<br>',
    legend_title_font_color='White',
    legend_title_font_family='Helvetica',
    legend_font_color='White',
    legend_font_family='Helvetica',
    legend_x=0.005,
    legend_y=0.995,
    legend_bgcolor='Black'
)

#
# 5. add an attribution statement for the data:
#
fig.add_annotation(
    x=+0.05,
    y=+0.005,
    showarrow=False,
    text="Contains information provided by the Oil and Gas Authority.",
    font_color='White',
    font_size=10,
    font_family='Helvetica',
    xref="paper",
    yref="paper",
    xanchor='left',
    yanchor='bottom'
)

#
# 6. show basemap:
#
fig.show()